<template>
	<view class="shop-view">
		<!-- 商品列表 -->
		<view class="goods-list" v-if="shopList.length">
			<!-- 滑动单元格 -->
			<van-swipe-cell v-for="item in shopList" :key="item.cartItemId" :right-width="toPx(140)">
				<view class="goods-item">
					<!-- 复选框 -->
					<van-checkbox @change="changeCheck(item.cartItemId, $event)" :value="item.isCheck" checked-color="#1baeae"></van-checkbox>
					<!-- 商品图片 -->
					<view class="goods-img"><image :src="item.goodsCoverImg" mode=""></image></view>
					<!-- 商品信息 -->
					<view class="goods-desc">
						<view class="goods-title">
							<text>{{ item.goodsName }}</text>
							<text>x{{ item.goodsCount }}</text>
						</view>
						<view class="goods-btn">
							<view class="price">¥{{ item.sellingPrice }}</view>
							<van-stepper @change="changeCount(item.cartItemId, $event)" :value="item.goodsCount" integer :min="1" :max="5" />
						</view> 
					</view>
				</view>
				<!-- 删除按钮 -->
				<van-button type="danger" slot="right" @click="shopStore.deleteGoods(item.cartItemId)">删除</van-button>
			</van-swipe-cell>
		</view>
		<!-- 空状态 -->
		<view class="empty" v-else>
			<!-- mode=widthfix  实现高度随宽度自适应 -->
		    <image class="empty-cart" src="https://s.yezgea02.com/1604028375097/empty-car.png" mode="widthFix"></image>
		    <view class="title">购物车空空如也</view>
		    <van-button round color="#1baeae" type="primary" @click="goTo" block>前往选购</van-button>
		</view>
		<!-- 操作栏 -->
		<van-submit-bar
		  v-if="shopList.length"
		  :price="totalPrice * 100"
		  button-text="提交订单"
		  @submit="goOrder"
		>
			<van-checkbox checked-color="#1baeae" :value="isCheckAll" @change="changeCheckAll">全选</van-checkbox>
		</van-submit-bar>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { ShopStore } from '../../store/shop';
import { UserStore } from '../../store/user';
import { toPx } from '../../utils';
import { ref, watch } from "vue";
const shopStore = ShopStore()
const userStore = UserStore()

const count = ref(0)

// 初始化数据
const init = async () => {
	// 判断是否登录
	if (!userStore.token) return
	// 1. 显示加载
	uni.showLoading({ title: '加载中...', mask: true })
	// 2. 获取数据
	await shopStore.updateList()
}

// 商品勾选
const changeCheck = (id, e) => {
	const isCheck = e.detail
	const index = shopStore.shopList.findIndex(item => item.cartItemId === id)
	shopStore.shopList[index].isCheck = isCheck
}

// 商品全选/反选
const changeCheckAll = (e) => {
	const isCheck = e.detail
	shopStore.shopList.forEach(item => (item.isCheck = isCheck))
}

// 商品数量改变
const changeCount =  async (id, e) => {
	const value = e.detail
	// 1. 限制最多5个
	if (value > 5) return uni.$Toast('超出单个商品的最大购买数量')
	// 2. 限制最小1个
	if (value < 1) return uni.$Toast('商品不得小于0')
	uni.showLoading({ title: '修改中...', mask: true })
	// 发起请求修改服务器数据
	await shopStore.updateCount(id, value)
	uni.hideLoading()
}

// 跳转首页
const goTo = () => {
	uni.switchTab({ url: '/pages/home/home' })
}

// 结算购物车
const goOrder = () => {
	shopStore.addressId = ''
	uni.navigateTo({ url: '/subpkg/create-order/create-order' })
} 

onShow(() => {
	init()
})


const { shopList, isCheckAll, totalPrice } = storeToRefs(shopStore)
</script>

<style lang="scss">
.goods-list {
	margin: 32rpx 0 0 0;
	padding-bottom: 100rpx;
	padding-left: 20rpx;
	.van-button {
		width: 140rpx;
		height: 100%;
	}
	.goods-item {
		display: flex;
		van-checkbox {
			display: flex;
			align-items: center;
		}
		.goods-img {
			image {
				@include wd(200rpx);
			}
		}
		.goods-desc {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 40rpx;
			.goods-title {
				@include fj();
			}
			.goods-btn {
				@include fj();
				.price {
					font-size: 32rpx;
					color: red;
					line-height: 56rpx;
				}
			}
		}
	}
}

// 空状态
.empty {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  margin-top: 300rpx;
  .empty-cart {
    width: 300rpx;
    margin-bottom: 40rpx;
  }
  .title {
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }
}

// 提交栏
.van-submit-bar {
    border-top: 2rpx solid #ebedf0;
    .van-checkbox {
        margin-left: 20rpx;
    }
    .van-submit-bar__text {
        margin-right: 20rpx;
    }
    .van-submit-bar__button {
        .van-button {
            background: $pc;
            border-color: $pc;
        }
    }
}
</style>
